<template>
    <div class="header">
        <nav class="navbar header-inner">
            <div class="container">
                <!--导航栏左侧-->
                <div class="navbar-header ">
                    <a href="/" class="navbar-brand">
                        <img src="../assets/img/vip2.png" alt="" style="width: 28px;display: inline; padding-bottom: 10px">
                        <span class="font-vip"> 片 库</span>
                        <span class="tip-text font-vip"> VIP会员专享</span>
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <!--搜索功能-->
                    <div class="navbar-form navbar-left">
                        <div class="form-group" :style="{backgroundColor : search_bg}">
                            <input type="text" class="form-control" placeholder="搜索词"
                                   @focus="search_action" @blur="search_default" v-model="search_value">
                            <a class="hot_search" href="/heat">
                                <span class="glyphicon glyphicon-fire font-vip"></span><span class="font-vip"> 热搜榜</span>
                            </a>
                        </div>
                        <a class="btn vip-tag" style="margin-left: -1px;" :href="`/search?wd=${this.search_value}`">
                            <span class="glyphicon glyphicon-search" style="color: white"></span>
                            <span style="color: white"> 搜全网</span>
                        </a>
                    </div>
                    <!--导航栏右侧-->
                    <ul class="nav navbar-nav navbar-right" style="padding-top: 5px">
                        <li style="width: 60px">
                            <a href="/vip" :style="{color: '#f0ad4e', backgroundColor: 'transparent',paddingTop: '10px'}">
                                <i class="el-icon-s-flag font-vip" style="font-size: 18px; padding-left: 3px"></i>
                                <span class="font-vip">VIP</span>
                            </a>
                        </li>
                        <li style="width: 60px">
                            <a href="#" :style="{backgroundColor: 'transparent',paddingTop: '8px'}">
                                <i class="el-icon-upload font-vip" style="font-size: 18px; padding-left: 6px"></i>
                                <span class="font-vip">上传</span>
                            </a>
                        </li>
                        <li style="width: 60px">
                            <a href="/user/record" :style="{backgroundColor: 'transparent',paddingTop: '8px'}">
                                <i class="el-icon-time font-vip" style="font-size: 18px; padding-left: 4px"></i>
                                <span class="font-vip">记录</span>
                            </a>
                        </li>
                        <li v-if="user_data" class="dropdown"
                            style="border: #dab176 2px solid; border-radius: 50%;margin-left: 10px">
                            <el-popover placement="bottom-end" width="260" trigger="hover">
                                <div class="tip-content">
                                    <img src="../assets/img/vip0.png" alt="" class="tip-user-type"
                                         v-if="user_data.vip_type==='普通会员'">
                                    <img src="../assets/img/vip1.png" alt="" class="tip-user-type"
                                         v-else-if="user_data.vip_type==='黄金会员'">
                                    <img src="../assets/img/vip2.png" alt="" class="tip-user-type"
                                         v-else>
                                    <a href="/user" class="tip-btn">
                                        {{user_data.nick_name}}
                                    </a>
                                </div>
                                <div class="tip_view">
                                    <a href="/user" class="tip-btn">
                                        <span class="tip-left-btn">个人中心</span>
                                    </a>
                                    <span class="tip-right-btn tip-btn" @click="logout">退出登录</span>
                                </div>
                                <img slot="reference" :src="user_data.icon" alt="图片走丢了"
                                     style="width: 45px;border-radius: 50%;" @click="go_user_center">
                            </el-popover>

                        </li>
                        <li v-else class="dropdown"
                            style="border: #dab176 3px solid; border-radius: 50%;margin-left: 10px">
                            <el-popover placement="bottom-end" width="260" trigger="hover">
                                <div class="tip-content">登录使用更多功能</div>
                                <div class="tip-login-btn" @click="put_login">注册/登录</div>
                                <img slot="reference" src="../assets/img/header-userImg-default-green.png" alt=""
                                     style="width: 45px;border-radius: 50%;" @click="put_login">
                            </el-popover>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--子组件-->
        <Login v-if="is_login_Dialog" @close="close_login" @go="go_dialog" class="login"/>
        <Register v-if="is_register_Dialog" @close="close_register" @go="go_dialog"/>
        <MobileLogin v-if="is_mobileLogin_Dialog" @close="close_mobileLogin" @go="go_dialog"/>
        <ThirdLogin v-if="is_thirdLogin_Dialog" @close="close_thirdLogin" @go="go_dialog"/>
    </div>
</template>

<script>
    import Login from "../components/Login"
    import Register from "../components/Register"
    import MobileLogin from "../components/MobileLogin"
    import ThirdLogin from "../components/ThirdLogin"

    export default {
        name: "VipHeader",
        props: ["search_val"],
        data() {
            return {
                // 搜索框的样式
                search_bg: "",
                // 搜索框的数据
                search_value: this.search_val || "",

                // 用户数据
                user_data: this.$cookies.get("user_info"),

                // 登陆界面
                is_login_Dialog: false,
                // 验证码登陆界面
                is_mobileLogin_Dialog: false,
                // 第三方登陆界面
                is_thirdLogin_Dialog: false,
                // 注册界面
                is_register_Dialog: false,
            }
        },
        methods: {
            // 选中
            search_action() {
                this.search_bg = "rgba(50,50,50,0.1)";
            },
            // 未选中
            search_default() {
                this.search_bg = "";
            },

            // 注销
            logout(){
                this.$cookies.remove('token');
                this.$cookies.remove('user_info');
                this.$store.state.userinfo = "";
                this.$store.state.token = {};
                this.user_data = "";
                if(this.$route.path !== '/') {
                    window.open("/", "_self")
                }
            },
            go_user_center(){
                if(this.$route.path !== '/user'){
                    window.open("/user", "_self")
                }
            },

            // 展示登陆界面
            put_login() {
                this.is_login_Dialog = true;
            },
            // 关闭dialog
            close_login() {
                this.is_login_Dialog = false;
                // this.user_data = this.$cookies.get("user_info");
            },
            close_register() {
                this.is_register_Dialog = false;
                // this.user_data = this.$cookies.get("user_info");
            },
            close_mobileLogin() {
                this.is_mobileLogin_Dialog = false;
                // this.user_data = this.$cookies.get("user_info");
            },
            close_thirdLogin() {
                this.is_thirdLogin_Dialog = false
                // this.user_data = this.$cookies.get("user_info");
            },
            go_dialog(dialog) {
                if (dialog === "register") {
                    this.is_register_Dialog = true;
                    this.is_login_Dialog = false;
                    this.is_mobileLogin_Dialog = false;
                    this.is_thirdLogin_Dialog = false;
                } else if (dialog === "regCodeLogin") {
                    this.is_login_Dialog = false;
                    this.is_mobileLogin_Dialog = false;
                    this.is_thirdLogin_Dialog = false;
                    this.is_register_Dialog = false;
                } else if (dialog === "login") {
                    this.is_mobileLogin_Dialog = false;
                    this.is_thirdLogin_Dialog = false;
                    this.is_register_Dialog = false;
                    this.is_login_Dialog = true;
                } else if (dialog === "mobileLogin") {
                    this.is_login_Dialog = false;
                    this.is_thirdLogin_Dialog = false;
                    this.is_register_Dialog = false;
                    this.is_mobileLogin_Dialog = true;
                } else if (dialog === "thirdLogin") {
                    this.is_login_Dialog = false;
                    this.is_register_Dialog = false;
                    this.is_mobileLogin_Dialog = false;
                    this.is_thirdLogin_Dialog = true;
                }
            }
        },
        created(){
            if(this.$route.path !== '/heat'){
                // 获取课程地区信息
                this.$axios.post(`${this.$settings.base_url}/video/leaderboard`,{
                    "rank": "search" // 请求参数
                }).then(response => {
                    this.search_value = response.data[0].title;
                }).catch(() => {
                    this.$message({
                        message: "获取排行榜信息有误，请联系客服工作人员",
                    })
                })
            }
        },
        watch: {
            // 监听vuex,实时获取信息
            "$store.state.userinfo":function () {
                this.user_data = this.$cookies.get("user_info");
            }
        },
        components: {
            Login,
            Register,
            MobileLogin,
            ThirdLogin
        },
    }
</script>

<style scoped>
    .header {
        position: absolute;
        top: 0;
        left: 0;
        height: 70px;
        /*设置渐变背景*/
        /*background: linear-gradient(0.1deg,transparent,rgba(0,0,0,.2));*/
        background: linear-gradient(0.1deg, transparent, rgba(255, 255, 255, .3));
        z-index: 8000;
        opacity: 1;

    }
    .navbar {
        margin-bottom: 0
    }
    .header-inner {
        padding: 5px 0;
        border: 0;
        opacity: 2;
        width: 1519px;
    }
    .container {
        min-width: 1280px;
    }

    .navbar-brand {
        font-size: 24px;
        color: #5bc0de;
    }

    .navbar-menu {
        color: #fff;
        font-size: 16px;
        margin: auto 30px;
        line-height: 62px;
        text-decoration: none;
    }

    .navbar-menu a:hover {
        color: #24a5ff;
    }

    .navbar-form {
        margin-left: -224px;
        position: absolute;
        left: 50%;
    }

    .navbar-form .form-group {
        border-radius: 21px 0 0 21px;
        color: #ffffff;
        /*border: 1px solid #24a5ff;*/
    }

    .navbar-form .form-control {
        border-radius: 21px 0 0 21px;
        font-family: Microsoft Yahei;
        width: 244px;
        height: 47px;
        border: 0;
        box-shadow: none;
        /*color: #f0ad4e;*/
        color: #999;
        /*background-color: rgba(51, 51, 51, 0.1);*/
        background-color: hsla(0, 0%, 75%, .15);
    }

    .navbar-form .hot_search {
        background-color: hsla(0, 0%, 75%, .15);
        padding: 12px 15px;
        display: inline-block;
        height: 46px;
    }

    .btn:focus, .btn:active:focus {
        outline: none;
    }

    .navbar-form .btn {
        border-radius: 0 21px 21px 0;
        width: 100px;
        height: 46px;
        font-size: 14px;
        line-height: 32px;
    }

    .form-group a {
        color: #888888;
    }

    .form-group a:hover {
        /*color: #24a5ff;*/
        color: #F0AD4E;
        text-decoration: none;
    }

    .nav .dropdown a {
        padding: 0 10px;
    }

    .tip-content{
        padding-top: 10px;
        padding-bottom: 20px;
        text-align: center;
        color: #b0b0b0;
        font-size: 16px;
    }
    .tip-login-btn{
        background: #0d9bff;
        text-align: center;
        margin: 0 10px 10px;
        border-radius: 20px;
        padding: 8px 0;
        color: white;
        font-size: 14px;
    }
    .tip-login-btn:hover{
        cursor: pointer;
    }
    .tip_view{
        font-size: 13px;
        border-top: 1px solid rgba(0, 0, 0, .1);
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 3px;
    }
    .tip-user-type{
        padding-bottom: 3px;
        width: 18px;
        height: 18px;
    }
    .tip-left-btn{

    }
    .tip-right-btn{
        float: right;
    }
    .tip-btn{
        text-decoration: none;
        color: #606266;
    }
    .tip-btn:hover{
        cursor: pointer;
        color: #0d9bff;
    }
    .vip-tag{
        background: #dab176;
    }
    .free-tag{
        background: #fc4273;
    }
    .font-vip{
        color: #dab176;
    }
    .tip-text{
        font-size: 16px;
    }
</style>